<template>
    <div class="searchpage">
        <div class="icons">
            <svg @click="goback" width="10.000000" height="16.000000" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="Vector" d="M3.63574 8L10 14.2227L8.18213 16L0 8L8.18213 0L10 1.77734L3.63574 8Z" fill-rule="evenodd" fill="#06070D"/>
            </svg>
            <svg @click="addBook" t="1703470711765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5241" width="30" height="30"><path d="M801.171 483.589H544V226.418c0-17.673-14.327-32-32-32s-32 14.327-32 32v257.171H222.83c-17.673 0-32 14.327-32 32s14.327 32 32 32H480v257.17c0 17.673 14.327 32 32 32s32-14.327 32-32v-257.17h257.171c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="" p-id="5242"></path></svg>
        </div>
        <div class="alltype">
            <div class="item" v-for="(item,index) in alltype" :key="index" :class="{active:currtype == index}" @click="changetype(index,item)">{{item}}</div>
        </div>
        <van-search v-model="value"   @search="goBookSearch" placeholder="请输入关键词,支持模糊查询" />
        <div class="content">
         <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="300"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <van-row gutter="10">
            <van-col span="8" v-for="(item, index) in allBookList" :key="index" class="alitem" @click="gotoDetail(item.id)">
              <img class="alitemimg" :src="item.img" />
              <p class="spans">{{ item.type }}</p>
              <p>{{ item.title }}</p>
            </van-col>
          </van-row>
        </van-list>
        </div>
    </div>
  </template>

<script>
import { Toast } from 'vant'
import { getAllbookPage, bookSearch, saveClick } from '@/api/api.js'
import userimg from '@/assets/lizer/userimg.jpg'
import select from '@/assets/tabbar/select.svg'
export default {
  name: 'Home',
  data () {
    return {
      value: '',
      currtype: 0,
      alltype: ['全部', '世界名著', '中国当代', '外国现当代', '历史', '散文随笔'],
      url: userimg,
      select: select,
      allBookList: [],
      page: 1,
      pageSize: 30,
      // 是否处在加载状态
      loading: false,
      // 是否已加载完成
      finished: false,
      // 是否加载失败
      error: false,
      // 数据总条数
      total: 0,
      booktype: ''
    }
  },
  methods: {
    postClick (id) {
      saveClick(id)
    },
    addBook () {
      this.$router.push('/addbook')
    },
    async goBookSearch () {
      const obj = {
        title: this.value,
        type: this.booktype,
        page: 1,
        pageSize: 100000
      }
      if (this.value === '' && this.booktype === '') {
        this.page = 1
        this.finished = false
        this.allBookList = []
        this.getAllBook()
        return
      }
      await bookSearch(obj).then((res) => {
        if (res.code === 200) {
          this.allBookList = res.data.results
          this.finished = true
          // this.allBookList.push(res.data)
        } else {
          this.allBookList = []
          this.finished = true
          Toast.fail('暂无此书')
        }
      })
    },
    async getAllBook () {
      if (this.page >= 32) {
        this.finished = true
        return
      }
      await getAllbookPage(this.page, this.pageSize).then((res) => {
        if (res.code === 200) {
          if (res.data.results.length === 0) { // 判断获取数据条数若等于0
            this.allBookList = [] // 清空数组
            this.finished = true // 停止加载
          }

          this.total = res.data.count
          this.allBookList.push(...res.data.results)
          this.loading = false // 加载状态结束
          // 如果list长度大于等于总数据条数,数据全部加载完成
          if (this.allBookList.length >= this.total) {
            this.finished = true // 结束加载状态
          }
        } else {
          this.error = true
        }
      })
    },
    // 被 @load调用的方法
    onLoad () { // 若加载条到了底部
      // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
      setTimeout(() => {
        this.page++// 分页数加一
        this.getAllBook()// 调用上面方法,请求数据
      }, 1000)
      // this.finished = true
    },
    // 加载失败调用方法
    onRefresh () {
      this.finished = false // 清空列表数据
      this.loading = true// 将 loading 设置为 true，表示处于加载状态
      this.page = 1// 分页数赋值为1
      this.allBookList = []// 清空数组
      this.onLoad()// 重新加载数据
    },
    goback () {
      this.$router.push('/main')
    },
    changetype (index, item) {
      this.currtype = index
      this.booktype = item
      if (item === '全部') {
        this.booktype = ''
      }
      this.goBookSearch()
    },
    gotoDetail (id) {
      this.postClick(id)
      this.$router.push({ path: '/bookdetail', query: { id: id } })
    }
  },
  mounted () {
    // this.getAllBook()
  }
}
</script>
<style lang="less" scoped>
.searchpage{
    width: 100%;
    height: 100%;
    // background-image: url('../../assets/logbg.png');
    // background: linear-gradient(to bottom, #ebdfcf, #e4cfbc, #dabfa9,)the I can promise you, I can promise you ;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #ffffff;
}
    .active{
        color: #000000 !important;
        font-size: 20px !important;
        border-bottom: 1px solid #000000;
    }
    .alltype{
        display: flex;
        width: 100%;
        overflow: auto;
        &::-webkit-scrollbar {
            height: 0;
            width: 0
        }
        .item {
            font-size: 18px;
            color: #dadada;
            text-align: center;
            width: 100px;
            height: 50px;
            flex-shrink: 0;
            line-height: 50px;
        }
    }
.van-search__content {
    border: 1px solid #dadada;
    border-radius: 15px;
}
.icons{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0px 20px;
  }
.alitem {
  height: 210px;
  text-align: center;
  .alitemimg{
  width: 101px;
  height: 135px;
  }
  .spans{
    display: block;
    font-size: 12px;
    color: #9b9b9b;
  }
  p{
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

</style>
